<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en-US">

<head>
<!-- META TAGS -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>人人为我，我为人人</title>

<link rel="shortcut icon" href="images/favicon.png" />

<!-- Style Sheet-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" />
<link rel='stylesheet' id='bootstrap-css-css'
	href='css/bootstrap5152.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='responsive-css-css'
	href='css/responsive5152.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='pretty-photo-css-css'
	href='js/prettyphoto/prettyPhotoaeb9.css?ver=3.1.4' type='text/css'
	media='all' />
<link rel='stylesheet' id='main-css-css' href='css/main5152.css?ver=1.0'
	type='text/css' media='all' />
<link rel='stylesheet' id='custom-css-css'
	href='css/custom5152.html?ver=1.0' type='text/css' media='all' />
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
<script type='text/javascript'
	src='js/prettyphoto/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='js/jflickrfeed.js'></script>
<script type='text/javascript' src='js/jquery.liveSearch.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<script type='text/javascript' src='js/jquery.validate.min.js'></script>
<script type='text/javascript' src='js/custom.js'></script>
<script src="layer.js"></script>
<script src="layui.js"></script>
<link rel="stylesheet" href="css/layui.css" media="all">

</head>

<body>

	<!-- Start of Header -->
	<div class="header-wrapper">
		<header>
			<div class="container">

				<div class="logo-container">
					<!-- Website Logo -->
					<!-- Website Logo -->
					<a href="index-2.html" title="解惑,是我们的乐趣!"> <!--<img src="images/logo.png" alt="Knowledge Base Theme">-->
						<h3 style="display: inline; color: #FFFFFF; line-height: 20px;">知之</h3>
					</a> <span class="tag-line">知之为知之,不知为不知,是知也。</span>
				</div>

				<!-- Start of Main Navigation -->
				<nav class="main-nav">
					<div class="menu-top-menu-container">
						<ul id="menu-top-menu" class="clearfix">
							<li><a href="index-2.jsp">首页</a></li>
							<li><a href="home-categories-description.html">百科</a></li>
							<li><a href="home-categories-articles.html">Java基础</a></li>
							<li><a href="articles-list.html">数据库</a></li>
							<li><a href="faq.html">FAQs</a></li>
							<li><a href="#">皮肤</a>
								<ul class="sub-menu">
									<li><a href="blue-skin.html">Blue Skin</a></li>
									<li><a href="green-skin.html">Green Skin</a></li>
									<li><a href="red-skin.html">Red Skin</a></li>
									<li><a href="index-2.html">Default Skin</a></li>
								</ul></li>
							<li><a href="#">更多精彩</a>
								<ul class="sub-menu">
									<li><a href="full-width.html">Full Width</a></li>
									<li><a href="elements.html">Elements</a></li>
									<li><a href="page.html">Sample Page</a></li>
								</ul></li>
							<li><a href="contact.html">联系我们</a></li>
							<li><a id="tourist" href="#"></a></li>
							<li><a id="topLogin" href="#">登录</a>
								<ul id="topUserIfm" class="sub-menu">
									<li><a href="blue-skin.html">个人信息</a></li>
									<li><a id="switchUser" href="#">切换账号</a></li>
									<li><a href="QuestionTopServlet?op=exitTopUser">退出</a></li>
								</ul></li>
							<li><a id="topRegister" href="#">注册</a></li>
						</ul>
					</div>
				</nav>
				<!-- End of Main Navigation -->

			</div>
		</header>
	</div>
	<!-- End of Header -->

	<!-- Start of Search Wrapper -->
	<div class="search-area-wrapper">
		<div class="search-area container">
			<h3 class="search-header">解惑,我们是专业的!</h3>
			<p class="search-tag-line">请输入要查询的问题!</p>

			<form id="search-form" class="search-form clearfix" method="get"
				action="#" autocomplete="off">
				<input class="search-term required" list="dl" type="text"
					id="nameLikeList" value="${nameLike==null?"
					":nameLike}"
					name="nameLike" placeholder="请输入..."
					title="* Please enter a search term!" />
				<datalist id="dl">
					<option value="java多继承" label="java"></option>
					<option value="java线程" label="java"></option>
					<option value="java序列化" label="java"></option>
					<option value="HTML5" label="前端"></option>
				</datalist>
				<input id="btnSearchList" class="search-btn" type="button" value="嗖一下" />
				<div id="search-error-container"></div>
			</form>
		</div>
	</div>
	<!-- End of Search Wrapper -->

	<!-- Start of Page Container -->
	<div class="page-container">
		<div class="container">
			<div class="row">

				<!-- start of page content -->
				<div class="span8 main-listing" id="loading">
					

				</div>
				<!-- end of page content -->

				<!-- start of sidebar -->
				<aside class="span4 page-sidebar">

					<section class="widget">
						<div class="support-widget">
							<h3 class="title userTitle">游客</h3>
							<p class="intro">游客暂时只有预览的功能哦！ 查看更多详情请登录。。。。</p>
						</div>
					</section>

					<section class="widget">
						<div class="quick-links-widget">
							<h3 class="title">功能菜单</h3>
							<ul id="menu-quick-links" class="menu clearfix">
								<li><a id="quiz" href="#">我要提问</a></li>
								<li><a href="question_list.jsp">问题列表</a></li>
								<li><a id="ImAnswer" href="#">我要回答</a></li>
								<li><a href="contact.html">公告</a></li>
							</ul>
						</div>
					</section>

					<section class="widget">
						<h3 class="title">Tags</h3>
						<div class="tagcloud">
							<a href="#" class="btn btn-mini">java</a> <a href="#"
								class="btn btn-mini">php</a> <a href="#" class="btn btn-mini">pyhon</a>
							<a href="#" class="btn btn-mini">嵌入式</a> <a href="#"
								class="btn btn-mini">css</a> <a href="#" class="btn btn-mini">html5</a>
							<a href="#" class="btn btn-mini">JavaScript</a> <a href="#"
								class="btn btn-mini">jquery</a> <a href="#" class="btn btn-mini">bootstrqp</a>
							<a href="#" class="btn btn-mini">header</a> <a href="#"
								class="btn btn-mini">images</a> <a href="#" class="btn btn-mini">plugins</a>
							<a href="#" class="btn btn-mini">setting</a> <a href="#"
								class="btn btn-mini">templates</a> <a href="#"
								class="btn btn-mini">theme</a> <a href="#" class="btn btn-mini">time</a>
							<a href="#" class="btn btn-mini">videos</a> <a href="#"
								class="btn btn-mini">website</a> <a href="#"
								class="btn btn-mini">wordpress</a>
						</div>
					</section>

				</aside>
				<!-- end of sidebar -->
			</div>
		</div>
	</div>
	<!-- End of Page Container -->

	<!-- Start of Footer -->
	<footer id="footer-wrapper">
		<div id="footer" class="container">
			<div class="row">

				<div class="span3">
					<section class="widget">
						<h3 class="title">How it works</h3>
						<div class="textwidget">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
								sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
								aliquam erat volutpat.</p>
							<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
								ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
								consequat.</p>
						</div>
					</section>
				</div>

				<div class="span3">
					<section class="widget">
						<h3 class="title">Categories</h3>
						<ul>
							<li><a href="#" title="Lorem ipsum dolor sit amet,">Advanced
									Techniques</a></li>
							<li><a href="#" title="Lorem ipsum dolor sit amet,">Designing
									in WordPress</a></li>
							<li><a href="#" title="Lorem ipsum dolor sit amet,">Server
									&amp; Database</a></li>
							<li><a href="#" title="Lorem ipsum dolor sit amet, ">Theme
									Development</a></li>
							<li><a href="#" title="Lorem ipsum dolor sit amet,">Website
									Dev</a></li>
							<li><a href="#" title="Lorem ipsum dolor sit amet,">WordPress
									for Beginners</a></li>
							<li><a href="#" title="Lorem ipsum dolor sit amet, ">WordPress
									Plugins</a></li>
						</ul>
					</section>
				</div>

				<div class="span3">
					<section class="widget">
						<h3 class="title">Latest Tweets</h3>
						<div id="twitter_update_list">
							<ul>
								<li>No Tweets loaded !</li>
							</ul>
						</div>
					</section>
				</div>

				<div class="span3">
					<section class="widget">
						<h3 class="title">Flickr Photos</h3>
						<div class="flickr-photos" id="basicuse"></div>
					</section>
				</div>

			</div>
		</div>
		<!-- end of #footer -->

		<!-- Footer Bottom -->
		<div id="footer-bottom-wrapper">
			<div id="footer-bottom" class="container">
				<div class="row">
					<div class="span6">
						<p class="copyright">Copyright © 2018. All Rights Reserved by
							KnowledgeBase.Collect from</p>
					</div>
					<div class="span6">
						<!-- Social Navigation -->
						<ul class="social-nav clearfix">
							<li class="linkedin"><a target="_blank" href="#"></a></li>
							<li class="stumble"><a target="_blank" href="#"></a></li>
							<li class="google"><a target="_blank" href="#"></a></li>
							<li class="deviantart"><a target="_blank" href="#"></a></li>
							<li class="flickr"><a target="_blank" href="#"></a></li>
							<li class="skype"><a target="_blank" href="skype:#?call"></a>
							</li>
							<li class="rss"><a target="_blank" href="#"></a></li>
							<li class="twitter"><a target="_blank" href="#"></a></li>
							<li class="facebook"><a target="_blank" href="#"></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- End of Footer Bottom -->

	</footer>

	<a href="#top" id="scroll-top"></a>

	<script type="text/javascript">
	     $(function(){
	    	 var register="";
	    	 $("#topRegister").click(function(){
	            	register = layer.open({
	    				  type: 2,
	    				  title:'亲，非常希望你能注册哦！！',
	    				  anim: 3,
	    				  time:60000,
	    				  content: 'register.jsp',
	    				  area: ['450px', '470px'],
	    				  maxmin: true
	    			});
	         });
	     });
	</script>
	<script type="text/javascript">
        $(function(){
        	var login="";
        	$("#topLogin").click(function(){

            	login = layer.open({
    				  type: 2,
    				  title:'亲，登录可以查看更多信息哦!!!!',
    				  anim: 3,
    				  time:60000,
    				  content: 'login_top.jsp',
    				  area: ['300px', '300px'],
    				  maxmin: true
    			});
        	});
        	var quiz="";
        	$("#quiz").click(function(){
        		if(${userTopLogin==null}){
         			layer.msg('亲，需要登录您才有权限哦！', {
     					time : 2000,
     					icon:5
     			  });
         		}else{
        		  quiz = layer.open({
    				  type: 2,
    				  title:'亲，非常欢迎你来提问题~',
    				  anim: 3,
    				  time:60000,
    				  content: 'submitQuestion.jsp',
    				  area: ['1000px', '1000px'],
    				  maxmin: true
    			  });
        		  layer.full(quiz);
         		}
        	});
        	var switchUser="";
        	$("#switchUser").click(function(){

        		switchUser = layer.open({
    				  type: 2,
    				  title:'亲，请登录你要切换的账号哦！！',
    				  anim: 3,
    				  time:60000,
    				  content: 'login_top.jsp',
    				  area: ['300px', '300px'],
    				  maxmin: true
    			});
        	});
        	$("#ImAnswer").click(function(){
     	    	$('html,body').animate({scrollTop:0},'slow');
     	    	layer.tips('请选择你要回答的问题的标题（或者关键字），我们将会为你找到符合你输入的关键字的问题','#nameLike', {
     	    		  tips: [1, '#3595CC'],
     	    		  time: 4000
     	    	});
     	    });
        });
    </script>
	<script type="text/javascript">
    $(function(){
	    if(${userTopLogin==null}){
		   $("#tourist").text("游客");
		   $("#topUserIfm").hide();
		   console.log(11111);
	    }else{
	       $("#tourist").css("display","none");
		   $("#topUserIfm").show();
		   $("#topLogin").text("${userTopLogin.userName}");
		   $(".userTitle").text("${userTopLogin.userName}");
		   $(".intro").text("${userTopLogin.userIntroduce}");
	    }
	    $("#ImAnswer").click(function(){
	    	$('html,body').animate({scrollTop:0},'slow');
	    	layer.tips('请选择你要回答的问题的标题（或者关键字），我们将会为你找到符合你输入的关键字的问题','#nameLikeList', {
	    		  tips: [1, '#3595CC'],
	    		  time: 4000
	    	});
	    });
    });
    </script>
	<script>
	layui.use('flow', function(){
		  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
		  var flow = layui.flow;
		  flow.load({
		    elem: '#loading' //指定列表容器
		    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
		      var lis = [];
		      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
		      $.ajax({
     			 url:"QuestionTopServlet?op=queryQuestion_timeSort_loading",
     			 type:"get",
     			 data:{
     				 "page":page
     			 },
     			 dataType:"text",
     			 success:function(res){
		        //假设你的列表返回在data集合中
		          var one = res.lastIndexOf("]");
		          var totalPage=res.substring(one+1);
     			  var result=res.substring(0,one+1);
     			  console.log(result);
     			  var array = JSON.parse(result);
		          layui.each(array, function(index, qs){
		        	var text = "";
		        	text += "<article class=\"format-standard type-post hentry clearfix\">";
		        	text += "							<header class=\"clearfix\">";
		        	text += "								<h3 class=\"post-title\">";
		        	text += "									<a href=\"sas.do?qId="+qs.qId+"\">"+qs.qTitle+"</a>";
		        	text += "								</h3>";
		        	text += "";
		        	text += "								<div class=\"post-meta clearfix\">";
		        	text += "									<span class=\"date\">"+qs.qDate+"</span> <span class=\"category\"><a";
		        	text += "										href=\"#\" title=\"View all posts in Server &amp; Database\">"+qs.userName+"</a></span>";
		        	text += "									<span class=\"comments\"><a href=\"#\"";
		        	text += "										title=\"Comment on Integrating WordPress with Your Website\">3";
		        	text += "											消息</a></span> <span style=\"cursor: pointer;\" class=\"like-count praiseQuestion"+qs.qId+"\" onclick=\"praiseQuestion("+qs.qId+")\" >"+qs.qPraise+"</span>";
		        	text += "								</div>";
		        	text += "								<!-- end of post meta -->";
		        	text += "							</header>";
		        	text += "";
		        	text += "							<p style=\"text-indent: 2em;\">"+qs.qContent+"<a";
		        	text += "									class=\"readmore-link\" href=\"sas.do?qId="+qs.qId+"\">查看更多</a>";
		        	text += "							</p>";
		        	text += "                                                        <br/>";
		        	text += "                                                        <br/>";
		        	text += "                                                         <br/>";
		        	text += "";
		        	text += "						</article>";

		            lis.push(text);
		        }); 
		        
		        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
		        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
		        next(lis.join(''), page < totalPage);
     			 }
		      });
		    }
		  });
		});
</script>
	<script type="text/javascript">
    $(function(){
    	 $("#btnSearchList").click(function(){
    		/*  location.href="QuestionTopServlet?op=queryQuestion_timeSort&req=frontList&nameLike="+$(""); */
    		 if(${userTopLogin==null}){
      			layer.msg('亲，需要登录您才有权限哦！', {
  					time : 2000,
  					icon:5
  			  });
      		}else{
    		 $.ajax({
    			 url:"QuestionTopServlet?op=queryQuestion_timeSort",
    			 type:"post",
    			 data:{
    				 "nameLike":$("#nameLikeList").val()
    			 },
    			 success:function(data){
    				 if(data=="false"){
    					 layer.msg('亲，搜不到你输入的关键字哦！ 请输入其他关键字', {
								time : 2000
						 });
    				 }else{
    					 layer.msg('搜索成功，有效的关键字！！！！', {
								time : 3000
						 },function(){
							 location.href="QuestionTopServlet?op=queryQuestion_timeSort&req=frontList&nameLike="+$("#nameLikeList").val();
						 });
    					 
    				 }
    			 }
    		 });
      		}
    	 });
    });
    </script>
    <script type="text/javascript">
        function praiseQuestion(qId){
           var qPra=parseInt($(".praiseQuestion"+qId).html());
           if(${userTopLogin==null}){
        			layer.msg('亲，需要登录您才有权限哦！', {
    					time : 2000,
    					icon:5
    			  });
           }else{
       	      $.ajax({
    			 url:"QuestionTopServlet?op=updatePraise",
    			 type:"post",
    			 data:{
    				 "qPraise":qPra+1,
    			     "qId":qId
    			 },
    			 success:function(data){
    				console.log(data);
    				$(".praiseQuestion"+qId).html(data);
    			 }
    		   });
           }
         }
    </script>
</body>

</html>